﻿<link href="~/lib/layui/css/layui.css" rel="stylesheet" />   @* 一 ①样式 *@ @* ②layui js库 *@
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<h2>给2207B补补前端</h2>

<b>input 文本框的使用</b>
<br />
<br />
<br />
<br />

学生姓名: <input type="type" id="studentName" value="" />

<span id="aaa"></span>  <input type="button" value="反填学生姓名"  onclick="fantianxuesheng()" />

<br />
<br />
<br />
<br />
<b>radio 单选按钮的使用</b>

<input type="radio" name="sex" value="0" /> 男
<input type="radio" name="sex" value="1" /> 女
<input type="radio" name="sex" value="2" /> 未知

<input type="button"   value="您选择的性别" onclick="getSex()" />

<br />
<br />
<br />
<br />
<b> select 下拉列表的使用的使用</b>

<select id="jieduan">
   @*   <option value="1">专高1</option>
    <option value="2">专高2</option>
    <option value="3">专高3</option>
    <option value="4">专高4</option>
    <option value="5">专高5</option>
    <option value="6">专高6</option> *@
</select>
<input type="button" name="name" value="您选择的阶段" onclick="getJieduan()" />

<br />
<br />
<br />
<b> 复选框checkbox的使用的使用</b>
<br />
<br />

<input type="checkbox" name="tech" class="techck" onclick="NocheckAll()" value="使用Cookie的授权过滤器" />使用Cookie的授权过滤器
<input type="checkbox" name="tech" class="techck" onclick="NocheckAll()" value="图片上传" />图片上传
<input type="checkbox" name="tech" class="techck" onclick="NocheckAll()" value="WebAPI" />WebAPI
<input type="checkbox" name="tech" class="techck" onclick="NocheckAll()" value="Layui 组件(分页、轮播图、弹窗、流式加载)" />Layui 组件(分页、轮播图、弹窗、流式加载)
<input type="checkbox" name="tech" class="techck" onclick="NocheckAll()" value="登录&注册逻辑" />登录&注册逻辑
<input type="checkbox" name="tech" class="techck" onclick="NocheckAll()" value="百度地图" />百度地图


<input type="button" name="name" value="您选择的技术" onclick="getTech()" />
<input type="checkbox" id="checkAll" onclick="checkAll()" value="全选" /> 全选
@* <input type="checkbox" id="UncheckAll" value="反选" /> 反选 *@

<script>
    $(function(){
        loadJieduan();
        loadSex();
    });
    var sex = 0;
    //给radio赋值
    function loadSex() {
        $("input[name='sex'][value=" + sex + "]").prop("checked",true);
    }

    function fantianxuesheng() { 
      var studentName =   $("#studentName").val(); //定义学生姓名并且取值
        $("#aaa").html(studentName);
    }


    function getSex() {
        var sex = $("input[name='sex']:checked").val();//取值
        alert(sex);
    }


    //下拉列表的初始化,和赋值
    function loadJieduan() {
        var jieduans = [
            { name: "专高三", value: 3 },
            { name: "专高四", value: 4 },
            { name: "专高五", value: 5 },
            { name: "专高六", value: 6 },
            { name: "专高一", value: 1 },
            { name: "专高二", value: 2 },
           ];//模拟调用webapi


        $("#jieduan").empty(); //清空下拉列表
        $(jieduans).each(function (i, obj) {

            // $("#jieduan").append("<option value='" + obj.value + "'>" + obj.name + "</option>");
            if (obj.value == 1) {//默认选中专高一
                $("#jieduan").append("<option value='" + obj.value + "' selected>" + obj.name + "</option>");
            } else {
                $("#jieduan").append("<option value='" + obj.value + "'>" + obj.name + "</option>");
            }
        });    
    }

    function getJieduan() {//下拉列表的取值
        var jieduan = $("#jieduan").val();
        alert(jieduan);
    }

    function getTech() {
        //你要取出所有复选框的选中元素集合
        //循环取出被选中的值

        var techs = [];
        $("input[name='tech']:checked").each(function () {
            techs.push($(this).val());
        });

        alert(techs.join(","));
    }

    function checkAll() {
        var qx = $("#checkAll").prop("checked");
        $(".techck").prop("checked", qx);
    }

    function NocheckAll() {
        var count = $(".techck").length;//所有复选框的个数
        var count2 = $(".techck:checked").length;//取选择的复选框个数
        $("#checkAll").prop("checked", count == count2)
    }
    
</script>